<script setup>
// 引入编辑器的CSS样式
import "@wangeditor/editor/dist/css/style.css";
// 引入编辑器和工具栏组件
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";
// 引入编辑器的启动模块
import {Boot} from "@wangeditor/editor";
// 引入附件上传插件
import attachmentModule from "@wangeditor/plugin-upload-attachment";
// 从Vue中引入响应式API
import {computed, ref, onBeforeUnmount, shallowRef, onMounted} from "vue";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from 'vue-router';
import axios from "axios";

const route = useRoute();
const router = useRouter();
// 定义响应式数据，表示文件上传的加载状态
let loading = ref(false);
let ArticleContent = ref();
let ArticleTitle = ref(null);
let Article = ref({
  "articleId": 0,
  "articleTitle": "",
  "content": "",
  "publishTime": "",
  "image": "",
  "consultantId": 0,
});
// 获取编辑器总字数
const TotalWordCount = ref(0);
let articleContentId = route.query.ArticleContentId || 0;
if (articleContentId !== 0) {
  axios.get("/articles/" + articleContentId).then(res => {
    if (res.data.code === 200) {
      console.log(res.data.data);
      Article.value = res.data.data
      ArticleTitle.value = res.data.data.articleTitle;
      console.log(ArticleTitle.value);
      editorRef.value.setHtml(res.data.data.content);
    }
  }).catch(err => {
    console.log(err);
  });
}

function formatDateTime(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const showImageAdd = ref(false);
//提交
const commit = () => {
  //新增
  if (articleContentId === 0) {
    // const value=JSON.parse(localStorage.getItem('key'));
    if (localStorage.getItem('key')) {
      Article.value.consultantId = JSON.parse(localStorage.getItem('key')).data.consultantId
    }
    Article.value.articleTitle = ArticleTitle.value
    Article.value.content = editorRef.value.getHtml()
    Article.value.publishTime = formatDateTime(new Date());
    // ArticleContent.value.authorId=value.id
    console.log(Article.value)
    axios.post("/articles", Article.value).then(res => {
      console.log(res)
      if (res.data.code === 200) {
        ElMessage("发布文章成功");
        router.push({path: '/Home/articles'});
      } else {
        ElMessage("发布文章失败");
      }
    }).catch(err => {
      console.log(err);
    })
  } else {
    if (localStorage.getItem('key')) {
      Article.value.consultantId = JSON.parse(localStorage.getItem('key')).data.consultantId
    }
    //修改文章publishTime
    Article.value.publishTime = formatDateTime(new Date());
    Article.value.content = editorRef.value.getHtml()
    Article.value.articleTitle = ArticleTitle.value
    console.log(Article.value.articleId)
    axios.put("/articles", Article.value).then(res => {
      console.log(res)
      console.log(JSON.parse(localStorage.getItem('key')).data.consultantId)
      if (res.data.code === 200) {
        ElMessage("修改文章内容成功")
        router.push("/home/articles")
      } else {
        ElMessage("修改文章内容失败")
      }

    }).catch(err => {
      console.log(err);
    });
  }
}
//取消
const cancel = () => {
  router.push("/home/articles")
}

function uploadImg(knwlgId, formData, additionalData,insertFn= {}) {
    // 这里是服务器上传接口的URL，需要替换成实际的URL
    const uploadUrl = 'http://127.0.0.1:9090/course/upload';
    // 将知识库ID和其他附加数据添加到FormData中
    formData.append('knwlgId', knwlgId);
    Object.keys(additionalData).forEach(key => {
      formData.append(key, additionalData[key]);
    });
    // 使用axios发送POST请求
    axios({
      method: 'post',
      url: uploadUrl,
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(response => {
          // 假设服务器返回的数据结构是 { code: 200, msg: "操作成功", data: "图片id或路径", additionalData: {} }
          if (response.data.code == 200) {
            console.log("上传成功"+response.data.data);
            loading.value = false;
            ElMessage("图片上传成功");
            insertFn("http://127.0.0.1:9090/file/download/byte/" + response.data.data);
            console.log("http://127.0.0.1:9090/file/download/byte/" + response.data.data)
          } else {
            ElMessage("图片上传失败");
          }
        })
        .catch(error => {
          ElMessage("图片上传失败");
        });
}

onMounted(() => {
  // const route = useRoute();
  // ArticleContent.value = route.query.ArticleContent || 'No ArticleContent received';
  // console.log(ArticleContent.value);
});
// // 图片上传配置
// props.editorConfig.MENU_CONF["uploadImage"] = {
//   // 最多上传一个文件
//   maxNumberOfFiles: 1,
//   // 只允许上传图片类型文件
//   //allowedFileTypes: ["image/*"],
//   // 自定义上传方法
//   async customUpload(file, insertFn) {
//     // 检查文件类型和大小
//     if (!file.type.includes("image")) {
//       return ElMessage.error("请上传图片格式的文件");
//     }
//     if (file.size / 1024 / 1024 > 200) {
//       return ElMessage.error("请上传200M以内的图片！");
//     }
//     // 构建表单数据
//     const formData = new FormData();
//     formData.append("file", file);
//     // 设置加载状态
//     loading.value = true;
//     // 上传图片并插入到编辑器
//     uploadImg(props.knwlgId, formData, formData).then((res) => {
//       loading.value = false;
//       //insertFn(import.meta.env.VITE_APP_BASE_API + res.data.imgId);
//       console.log(res.data.data)
//       insertFn("http://127.0.0.1:9090/file/download/byte/" + res.data.data);
//       console.log("http://127.0.0.1:9090/file/download/byte/" + res.data.data)
//     })
//         .catch(() => {
//           loading.value = false;
//         });
//   },
// };


// 定义组件的props，包括高度、模式、编辑器配置、模型值和知识库ID

const props = defineProps({
  height: {
    type: Number,
    default: 750,
  },
  mode: {
    default: "default",
    type: String,
  },
  editorConfig: {
    default: () => ({
      placeholder: "<p style=\"text-align: left;\">欢迎使用十方智育,请在此处编辑您的文章</p>",
      MENU_CONF: {
        uploadImage: {
          maxNumberOfFiles: 1,
          maxFileSize: 5 * 1024 * 1024, //设置最大文件大小为5M
          server: 'http://127.0.0.1:9090/course/upload',//上传接口
          fieldName: 'file',
          customInsert: (res, insertImg) => {
            console.log(res)
            const url = "http://127.0.0.1:9090/file/download/byte/" + res.data//回显接口
            insertImg(url, '图片描述', '20px', 'auto')
          },
          // customUpload: (file, insertFn, abortFn) => {
          //    console.log(file)
          //   // 检查文件类型和大小
          //   if (!file.type.includes("image")) {
          //     return ElMessage.error("请上传图片格式的文件");
          //   }
          //   if (file.size / 1024 / 1024 > 5) {
          //     return ElMessage.error("请上传5M以内的图片！");
          //   }
          //   // 构建表单数据
          //   const formData = new FormData();
          //   formData.append("file", file);
          //   // // 设置加载状态
          //
          //   //loading.value = true;//不能在此处设置,会将loading作用域提到全局,报错
          //   // 上传图片并插入到编辑器
          // }
        }
      },
    }),
    type: Object,
  },
  modelValue: {
    required: true,
    type: String,
  },
  knwlgId: {
    required: true,
    type: String,
  },
});
// 图片上传配置
props.editorConfig.MENU_CONF.uploadImage.customUpload = (file, insertFn) => {
  // 检查文件类型和大小
  if (!file.type.includes("image")) {
    return ElMessage.error("请上传图片格式的文件");
  }
  if (file.size / 1024 / 1024 > 5) {
    return ElMessage.error("请上传5M以内的图片！");
  }
  // 构建表单数据
  const formData = new FormData();
  formData.append("file", file);
  // 设置加载状态
  loading.value = true;
  // 上传图片并插入到编辑器
  uploadImg(props.knwlgId, formData, formData,insertFn)
}

// 定义emit事件，用于更新模型值和设置HTML
const emits = defineEmits(["update:modelValue", "setHtml"]);

// 注册附件上传插件，确保只注册一次
if (Boot.plugins.length < 13) {
  Boot.registerModule(attachmentModule);
}

// 工具栏配置，自定义插入“上传附件”菜单的位置
const toolbarConfig = {
  insertKeys: {
    index: 0,
    keys: ["uploadAttachment"],
  },
};

// 编辑器实例，使用shallowRef以避免不必要的渲染
const editorRef = shallowRef();
//ref('<p style="text-align: left;"></p>');
// 计算属性，用于双向绑定编辑器的内容
const editValue = computed({
  // 当访问计算属性时，调用get函数
  get() {
    // 返回props.modelValue的值，如果它是undefined，则返回一个默认值
    return props.modelValue || '<p style="text-align: left;"></p>';
  },
  // 当计算属性的值被设置时，调用set函数
  set(value) {
    // 发出update:modelValue事件，将新值传递给父组件
    emits("update:modelValue", value);
  },
});

// 编辑器创建时的回调，记录编辑器实例
const handleCreated = (editor) => {
  editorRef.value = editor;
};
const SelectedWordCount = ref(0)
// 编辑器内容变化时的回调，触发setHtml事件
const handleChange = (editor) => {
  emits("setHtml", editor.getText(), editor.getHtml());
  console.log(editorRef.value.getHtml());
  if (editorRef.value) {
    const text = editorRef.value.getText();
    TotalWordCount.value = text.length;
  }
  if (editor.selection) {
    const selectedText = editor.selection.focus.offset - editor.selection.anchor.offset//.focus.offset; // 使用anchor.offset起始位置
    SelectedWordCount.value = Math.abs(selectedText);
  }
};
// 组件销毁前，销毁编辑器实例
onBeforeUnmount(() => {
  if (editorRef.value) {
    editorRef.value.destroy();
  }
});

// 销毁编辑器实例的方法
const distoryEditor = () => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
};

// 实时更新编辑器内容的方法
const setWangContent = (val) => {
  editorRef.value.setHtml(val);
};
const uploadMyImage = (event) => {
  const files = event.target.files;
  if (files.length === 0) {
    console.log('没有文件被选择');
    return;
  }
  const formData = new FormData();
  formData.append('file', files[0]);
  // for (let i = 0; i < files.length; i++) {
  //   formData.append('file', files[i]);
  // }
  axios.post('http://127.0.0.1:9090/course/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(response => {
    console.log('封面上传成功', response);
    ElMessage("封面上传成功")
    Article.value.image = response.data.data;
    console.log(Article.value.image);
    // 处理成功响应
  }).catch(error => {
    ElMessage("封面上传失败")
    console.error('文件上传失败', error);
    // 处理错误响应
  });
}

//

//
// // 视频上传配置
// props.editorConfig.MENU_CONF["uploadVideo"] = {
//   // 最多上传一个文件
//   maxNumberOfFiles: 1,
//   // 自定义上传方法
//   async customUpload(file, insertFn) {
//     // 检查文件类型和大小
//     if (!file.type.includes("video")) {
//       return ElMessage.error("请上传视频格式的文件！");
//     } else if (file.size / 1024 / 1024 > 200) {
//       return ElMessage.error("请上传200M以内的文件！");
//     }
//     // 构建表单数据
//     const formData = new FormData();
//     formData.append("file", file);
//     // 设置加载状态
//     loading.value = true;
//     // 上传视频并插入到编辑器
//     uploadImg(formData)
//         .then((res) => {
//           loading.value = false;
//           insertFn(res.data.url);
//         })
//         .catch(() => {
//           loading.value = false;
//         });
//   },
// };
//
// // 附件上传配置
// props.editorConfig.MENU_CONF["uploadAttachment"] = {
//   // 自定义上传方法
//   async customUpload(file, insertFn) {
//     // 检查文件大小
//     if (file.size / 1024 / 1024 > 200) {
//       return ElMessage.error("请上传200M以内的附件！");
//     }
//     // 构建表单数据
//     const formData = new FormData();
//     formData.append("file", file);
//     // 设置加载状态
//     loading.value = true;
//     // 上传附件并插入到编辑器
//     uploadImg(formData)
//         .then((res) => {
//           loading.value = false;
//           insertFn(res.data.name, res.data.url);
//         })
//         .catch(() => {
//           loading.value = false;
//         });
//   },
// };
</script>

<template>
  <!-- 外层容器，设置了边框和最大宽度 -->
  <div style="width: 100%;padding-top: 30px">
    <input placeholder="请输入标题" class="articleTitle" v-model="ArticleTitle">
    <div
        style="border: 1px solid #ccc; max-width:100%;margin: 0 auto"
        v-loading="loading"
        element-loading-text="文件上传中..."
    >
      <!-- 工具栏组件，设置了边框 -->
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
      />
      <!-- 编辑器组件，设置了高度和溢出隐藏 -->
      <Editor
          :style="{ height: height + 'px',with:'100%', overflowY: 'hidden' }"
          class="EditorDom"
          v-model="editValue"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
          @onChange="handleChange"
      />
    </div>
    <div style="position: relative;width: 100%">
      <div>
        <!-- 自定义文件上传按钮 -->
        <label :for="'fileInput'" class="custom-file-button">
          上传封面
        </label>
        <!-- 原生文件输入框，设置为透明并绝对定位到屏幕外 -->
        <input type="file" @change="uploadMyImage($event)"
               style="opacity: 0; position: absolute; left: -9999px;" :id="'fileInput'">
      </div>
      <button
          style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;position: absolute;top: 10px;right: 120px"
          @click="commit">提交
      </button>
      <button
          style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;position: absolute;top: 10px;right: 10px"
          @click="cancel">取消
      </button>
    </div>


    <div>文章字数:{{ TotalWordCount }}</div>
    <div>选中字数:{{ SelectedWordCount }}</div>

  </div>
</template>


<style scoped>
.articleTitle {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 40px;
  border-bottom: none; /* 仅移除下边框 */
  outline: none; /* 移除聚焦时的轮廓线 */
}

.custom-file-button {
  position: absolute;
  top: 10px;
  right: 280px;
  display: inline-block;
  background-color: rgba(64, 158, 255, 0.81);
  color: #fff;
  height: 25px;
  line-height: 25px;
  width: 100px;
  text-align: center;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.custom-file-button:hover {
  background-color: rgba(64, 158, 255, 1);
  border-radius: 10px;

}

</style>